<template>
    <div>
        <v-top>
            <h3>购物车</h3>
        </v-top>

        <!-- 导航栏 -->
        <nav>
            <ul class="nav-sort">
                <li class="fontSize">
                    <a href="#">全部(20)</a>
                    <span></span>
                </li>
                <li>
                    <a href="#">降价(4)</a>
                    <span></span>
                </li>
                <li>
                    <a href="#">常卖(2)</a>
                    <span></span>
                </li>
                <li>
                    <a href="#"
                        >分类
                        <i
                            class="iconfont icon-shangxiajiantouheise font28"
                        ></i>
                    </a>
                    <span></span>
                </li>
            </ul>
        </nav>
        <!-- 中间内容 -->
        <article class="content">
            <!-- 店铺 -->
            <section class="flex">
                <!-- <div class="conNav-left">
                    <input
                        type="checkbox"
                        v-model="store1"
                        id="store1"
                        @click="storeStatus"
                    />
                    <label for="store1" class="font32">
                        <span>小U自营</span>
                    </label>
                </div> -->
                <van-checkbox v-model="store1" @click="storeStatus">小U自营</van-checkbox>
                <div class="conNav-right">
                    <span class="font24">已免运费</span>
                    <span class="font24">领券</span>
                </div>
            </section>
            <!-- 店铺内商品 -->
            <section class="storeGoods">
                <!-- <div class="goods"  v-for="(item,index) in cartlist" :key="item.id">
                    <ul class="flex">
                        <li class="conNav-left">
                            <input type="checkbox" name="store1" :id="'com'+index" v-model="item.status" @click="isChose(index)">
                            <label :for="'com'+index" class="font32"></label>
                        </li>
                        <li>
                            <img :src="item.img" alt="商品">
                        </li>
                        <li class="introduce">
                            <div>
                                <h4 class="font32">{{item.goodsname}}</h4>
                                <p class="font28 comIntroduce">敏感肌可用，控油祛痘、男女可...</p>
                            </div>
                            <div class="commodityBot">
                                <select class="font20">
                                    <option value="粉色 50ML">粉色 50ML</option>
                                </select>
                                <p class="font20 ">比加入时降低￥100</p>
                            </div>
                            <div class="flex">
                                <p class="money">
                                    <b class="font20">￥</b>
                                    <span>{{item.price}}</span>
                                    <del class="font20">￥1099</del>
                                </p>
                                <div class="comNum flex">
                                    <button class="font28" @click="cut(item.id)">一</button>
                                    <div class="number font28">{{item.num}}</div>
                                    <button class="font28" @click="add(item.id)">十</button>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="del">删除</div>
                </div> -->

                <van-swipe-cell v-for="item in cartlist" :key="item.id">
                    <van-checkbox v-model="item.status" @click="isChose"/>
                    <van-card
                        :price="item.price+'.00'"
                        desc="描述信息"
                        :title="item.goodsname"
                        class="goods-card"
                        :thumb="item.img"
                    />
                    <van-stepper v-model="item.num" disable-input integer @plus="add(item.id)" @minus="cut(item.id)"/>
                    <template #right>
                        <van-button
                            square
                            text="删除"
                            type="danger"
                            class="delete-button"
                            @click="del(item.id)"
                        />
                    </template>
                </van-swipe-cell>
            </section>
        </article>
            <div class="payfor flex">
                <!-- <div class="conNav-left">
                    <input type="radio" name="store1" id="store1">
                    <label for="store1" class="font32">
                        <span>全选</span>
                    </label>
                </div> -->
                <van-checkbox v-model="store1">全选</van-checkbox>
                <p class="flexC">
                    <strong class="font32">合计</strong>
                    <span class="font20">已免运费</span>
                </p>
                <p class="money flexC">
                    <span>￥{{allPrice}}</span>
                    <span class="font20">已优惠￥200元</span>
                </p>
                <input type="submit" value="结算" class="font32" @click="toOrder">
            </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import {cartdelete} from '../utils/api'
export default {
    data() {
        return {
            store1: true,
            // cartlist:[],
        };
    },
    methods: {
        //店铺全选控制店铺商品
        storeStatus() {
            // this.store1 = !this.store1;
            this.cartlist.map((item) => (item.status = this.store1));
        },
        //店铺商品控制店铺全选
        isChose() {
            // this.cartlist[i].status = !this.cartlist[i].status;
            this.store1 = this.cartlist.every((item) => item.status);
            console.log('点击')
        },
        //点击增加
        add(id) {//点击了后 UI视图自动使得加一，数据也变化
            this.$store.dispatch("cartedit_g", { id, type: 2 });
        },
        //点击减少
        cut(id) {
            this.$store.dispatch("cartedit_g", { id, type: 1 });
        },
        //点击删除
        del(id){
            Dialog.confirm({
                message: '确定删除吗？',
            }).then(() => {
                cartdelete(id).then(res=>{
                    //调取接口购物车列表
                    let uid = JSON.parse(localStorage.getItem("user")).uid;
                    //调用vuex的cartlist接口
                    this.$store.dispatch("cartlist_g", { uid });
                })
            });
        },
        //跳转到结算
        toOrder(){
            this.$router.push('/order')
        }
    },
    computed: {
        //获取vuex中axios获取到的购物车列表
        cartlist() {
            return this.$store.getters.getCartlist;
        },
        //获取合计
        allPrice(){
            var sum = 0;
            this.$store.getters.getCartlist.forEach(item=>{
                if(item.status){
                    sum+= item.price * item.num
                }
            })
            return sum.toFixed(2)
        },
    },
    mounted() {
        //判断是否登录
        if (!localStorage.getItem("user")) {
            alert("请登录");
            this.$router.push("/login");
            return;
        }
        //调取接口购物车列表
        let uid = JSON.parse(localStorage.getItem("user")).uid;
        //调用vuex的cartlist接口
        this.$store.dispatch("cartlist_g", { uid });
    },

};
</script>

<style scoped src="../assets/css/shoppingCart.css"></style>
<style scoped>
.payfor{
    position: fixed;
    bottom: 1rem;
}
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}
.storeGoods .van-checkbox {
    position: absolute;
    left: 0.03rem;
    top: 0.7rem;
    z-index: 2;
}
.van-stepper{
    font-size: 0;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    z-index: 1;
    bottom: 0px;
    right: 0px;
}
.van-card__num  {
    float: right;
    color: #969799;
    position: absolute;
    left: 2px;
    top: 40px;
}

</style>
